<template>
  <div class="main-nav">
    <div class="name" :style="{ width: nameWidth }">
      <span v-if="!isCollapse">工程经营</span>
      <el-icon :size="26" @click="handleToggle(isCollapse)"><expand v-if="isCollapse" /><fold v-if="!isCollapse" /></el-icon>
    </div>
    <el-scrollbar>
      <el-menu class="el-menu-app" :default-active="currentRoute" collapse-transition :collapse="isCollapse">
        <template v-for="(item, index) in menuRoutes" :key="index">
          <el-menu-item :index="item.meta.name" @click="handleMenuRoute(item.meta)">
            <el-icon><milk-tea /></el-icon>
            <template #title>{{ item.meta.title }}</template>
          </el-menu-item>
        </template>
        <!-- <el-menu-item index="home" @click="handleMenuRoute('home', '首页标题显示')">
          <el-icon><milk-tea /></el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><wallet /></el-icon>
            <span>财务管理</span>
          </template>
          <el-menu-item index="2-1" @click="router.push({ name: 'budget' })">
            <template #title>预算管理</template>
          </el-menu-item>
          <el-sub-menu index="2-2">
            <template #title><span>收付款管理</span></template>
            <el-menu-item index="2-2-1" @click="router.push({ name: 'collection' })">收款管理</el-menu-item>
            <el-menu-item index="2-2-2" @click="router.push({ name: 'payment' })">付款管理</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="3" v-show="false">
          <template #title>
            <el-icon><setting /></el-icon>
            <span>系统设置</span>
          </template>
          <el-sub-menu index="3-2">
            <template #title><span>风险设置</span></template>
            <el-menu-item index="3-2-1" @click="router.push({ name: 'risk-model-setting' })">风险模型管理</el-menu-item>
            <el-menu-item index="3-2-2" @click="router.push({ name: 'risk-index-setting' })">风险指标管理</el-menu-item>
            <el-menu-item index="3-2-3" @click="router.push({ name: 'risk-object-setting' })">评价对象管理</el-menu-item>
            <el-menu-item index="3-2-4" @click="router.push({ name: 'risk-class-setting' })">策略分类管理</el-menu-item>
            <el-menu-item index="3-2-5" @click="router.push({ name: 'risk-rule-setting' })">风险规则管理</el-menu-item>
          </el-sub-menu>
        </el-sub-menu> -->
        <el-menu-item index="test" @click="handleMenuRoute('test', '测试页面标题')">
          <el-icon><hot-water /></el-icon>
          <template #title>测试页</template>
        </el-menu-item>
        <el-menu-item index="test1"  @click="handleMenuRoute('test1', '测试页面1')">
          <el-icon><hot-water /></el-icon>
          <template #title>测试页1</template>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { defineComponent, getCurrentInstance, computed, watch } from 'vue'
import { getItem } from '@/utils/auth'

defineComponent({
  name: 'mainNav',
})

// 初始化操作
const { appContext } = getCurrentInstance()
const { $router, $route, $store } = appContext.config.globalProperties

// 展开/收起操作
let isCollapse = $ref(false)
let nameWidth = $ref('100%')
let Emit = defineEmits(['submitToggle'])
let handleToggle = isValue => {
  isCollapse = !isCollapse
  nameWidth = !isValue ? '48px' : '100%'
  Emit('submitToggle', !isValue)
}

// 设置当前高亮/首次进来设置路由缓存
let menuRouteCache = $ref(computed(() => $store.state.menu.tagViewList))
if (menuRouteCache.length === 0) {
  menuRouteCache.push({ name: $route.name, path: $route.path, title: $route.meta.title })
  $store.commit('menu/SET_TAG_VIEW_ROUTES', menuRouteCache)
}

// 监听当前高亮变化
let currentExpendRoutes = $ref({ name: $route.name, path: $route.path, title: $route.meta.title })
let currentTagViews = computed(() => $store.state.menu.currentTagViews)
let currentRoute = computed(() => $store.state.menu.currentTagViews.name)
$store.commit('menu/SET_CURRENT_TAG_VIEWS', currentExpendRoutes)
watch(currentTagViews, newObj => {
  currentExpendRoutes = newObj
}, { immediate:true, deep: true })

/**
 * 路由切换
 * @param {*} routeName
 * @param {*} title 
 */
// let handleMenuRoute = (meta) => {
//   $router.push(meta.path)
//   $store.commit('menu/SET_CURRENT_TAG_VIEWS', { name: meta.name, path: meta.path, title: meta.title })
//   if (menuRouteCache.length) {
//     let isHasRoute = menuRouteCache.filter(item => item.name === meta.name).length !== 0
//     if (!isHasRoute) {
//       menuRouteCache.push({
//         name: meta.name,
//         path: meta.path,
//         title: meta.title
//       })
//       $store.commit('menu/SET_TAG_VIEW_ROUTES', menuRouteCache)
//     }
//   }
// }
let handleMenuRoute = (routeName, title) => {
  $router.push(`/${routeName}`)
  $store.commit('menu/SET_CURRENT_TAG_VIEWS', { name: routeName, path: `/${routeName}`, title: title })
  if (menuRouteCache.length) {
    let isHasRoute = menuRouteCache.filter(item => item.name === routeName).length !== 0
    if (!isHasRoute) {
      menuRouteCache.push({
        name: routeName,
        path: `/${routeName}`,
        title: title
      })
      $store.commit('menu/SET_TAG_VIEW_ROUTES', menuRouteCache)
    }
  }
}
console.log($route)
// 路由处理
let menuRoutes = JSON.parse(getItem('menuRouters'))
watch($route, (newObj) => {
  console.log(newObj)
}, { deep: true })
</script>

<style scoped lang="scss">
.main-nav {
  height: 100%;
  .name {
    height: 48px;
    border-bottom: 1px solid #DCDFE6;
    background: #fff;
    span {
      display: inline-block;
      height: 48px;
      line-height: 48px;
      font-size: 20px;
      font-weight: bold;
      padding-left: 20px;
    }
    position: relative;
    .el-icon {
      position: absolute;
      top: 12px;
      right: 10px;
      color: rgb(48, 18, 18);
      cursor: pointer;
    }
  }
}
.el-scrollbar {
  height: calc(100% - 50px);
}
</style>
